<template>
  <div id="app">
    <el-form label-width="120px">
      <el-form-item label="信息描述">
        <el-tooltip
          class="item"
          effect="dark"
          content="必须按照规定格式上传excel"
          placement="top-start"
        >
          <el-tag class="explain" type="info">excel模版说明</el-tag>
        </el-tooltip>
        &nbsp; &nbsp;
        <el-tag>
          <i class="el-icon-download" />
          <!--
                这里只能用a标签的href来下载，不能用button设置点击事件用axios下载 
                因为a标签和form表单都是同步请求，文件的上传和下载必须用同步请求才能弹窗，
                而ajax和axios都是默认异步请求的
             -->
          <a :href="'http://localhost:8081/subject/download'">点击下载模版</a>
        </el-tag>
      </el-form-item>
      <el-form-item label="选择Excel">
        <!--   
          el-upload标签对象的名称
          ref:"upload"   等于上传按钮函数中的upload   this.$refs.upload.submit();
          limit:一次性上传文件个数
         -->
        <el-upload
          :auto-upload="false"
          ref="upload"
          :on-success="fileUploadSuccess"
          :on-error="fileUploadError"
          :disabled="importBtnDisabled"
          :limit="1"
          :action="'http://localhost:8081/subject/excelUpload'"
          name="file"
          accept="application/vnd.ms-excel"
        >
          <el-button slot="trigger" size="small" type="primary"
            >选取文件</el-button
          >
          <!-- 这里有一个点击事件 -->
          <el-button
            :loading="loading"
            style="margin-left: 10px"
            size="small"
            type="success"
            @click="submitUpload"
            >上传到服务器</el-button
          >
        </el-upload>
      </el-form-item>
    </el-form>
    <!-- 加一个分割线 -->
    <el-divider></el-divider>
    <!-- :props="defaultProps"暂时不用 -->
    <el-tree
      :data="subjectList"
      @node-click="nodeClick"
    >
    <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        &nbsp;          &nbsp;
        <el-tooltip v-if="data.parentId==0?true:false" class="item" effect="dark" content="添加" placement="top">
          <el-button
          icon="el-icon-folder-add"
            type="text"
            size="mini"
            @click="() => addSubject(node, data)">
          </el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="删除" placement="top">
          <el-button
          icon="el-icon-delete"
            type="text"
            size="mini"
            @click="() => removeSubject(node, data)">
          </el-button>
        </el-tooltip>
    </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      subjectList: [],
      loading: false,
      //是否禁用的意思，默认不禁用
      importBtnDisabled: false,
    };
  },
  created() {
    this.initTree(); //初始化树形列表
  },
  methods: {
    initTree() {
      this.$http.get("/subject/getSubjectTree").then((res) => {
        console.log(res);
        this.subjectList = res.data.data;
      });
    },
    //上传成功的回调函数
    fileUploadSuccess() {
      this.$message({
        message: "上传excel成功",
        type: "success",
      });
      //刷新页面 （为了重新发网络请求）
      this.$router.push("/subject");
    },
    //上传失败的回调函数
    fileUploadError() {
      this.$message.error("上传excel失败");
    },
    //用户点击上传按钮以后执行
    submitUpload() {
      this.$refs.upload.submit(); //上传的意思
    },
    nodeClick(data) {},
    removeSubject(node, data) {
      this.$confirm('您是否要删除这个课程分类信息', '删除课程分类', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          this.$http
          .get("/subject/deleteSubject/"+data.id)
          .then((res) => {
            this.$message({
              message: "删除课程分类信息成功",
              type: "success",
            });
            this.initTree();
          });
        })
    },
    addSubject(node, data) {
      //1.弹窗2.用户输入的内容+id传过去
      this.$prompt("请输入课程分类名称", "添加课程分类", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(({ value }) => {
        let formDate = new FormData();
        formDate.append("parentId", data.id);
        formDate.append("title", value);
        this.$http
          .post("/subject/addSubject", formDate, {
            Headers: {
              //key-value形式的响应头
              "Content-Type": "application/x-www-form-urlencoded",
            },
          })
          .then((res) => {
            this.$message({
              message: "添加课程分类成功",
              type: "success",
            });
            this.initTree();
          });
      });
    },
  },
};
</script>

<style scoped>
</style>
